<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="/templates/masterPage.xhtml">
	<ui:define name="content">
		<style type="text/css">
.panelColumns td {
	vertical-align: top;
}
</style>
		<div align="center"
			style="margin: 100px; margin-left: 50px; margin-right: 50px;">
			<h:form id="form">
				<p:growl id="message" life="3000" />
				<p:dialog id="paramDialog" widgetVar="paramDialog">
					<p:panelGrid id="paramDialogGrid" styleClass="panelColumns">
						<p:row>
							<p:column>
								<p:panelGrid columns="1">
									<h:outputLabel value="Manufacturer: " style=" font-size: 9pt;" />
									<p:inputText value="#{trendsBean.params.manufacturer}" />
									<h:outputLabel value="Category: " style=" font-size: 9pt;" />
									<p:inputText value="#{trendsBean.params.category}" />
									<h:outputLabel value="Class: " style=" font-size: 9pt;" />
									<p:inputText value="#{trendsBean.params.itemClass}" />
									<h:outputLabel value="Model: " style=" font-size: 9pt;" />
									<p:inputText value="#{trendsBean.params.model}" />
									<h:outputLabel value="Parameters(separated by ','): "
										style=" font-size: 9pt;" />
									<p:inputText value="#{trendsBean.params.params}" />
								</p:panelGrid>
								<p:commandButton value="Search" widgetVar="searchBtn"
									actionListener="#{trendsBean.search}"
									onclick="pb.start(); searchBtn.disable();"
									update=":form:itemsTable" style=" font-size: 9pt;" />
								<p:progressBar interval="100" widgetVar="pb" ajax="true"
									value="#{trendsBean.progress}" labelTemplate="{value}%"
									styleClass="animated">
									<p:ajax event="complete" listener="#{trendsBean.onComplete}"
										update=":form:message" oncomplete="searchBtn.enable()" />
								</p:progressBar>
							</p:column>
							<p:column>
								<p:dataTable id="itemsTable" var="item"
									value="#{trendsBean.items}"
									selection="#{trendsBean.selectedItem}" rowKey="#{item.id}"
									paginator="true" rows="10" emptyMessage="">
									<p:column selectionMode="single" style="width:18px" />
									<p:column headerText="ID" style=" font-size: 9pt;">
										<h:outputText value="#{item.id}" style=" font-size: 9pt;" />
									</p:column>
									<p:column headerText="Manufacturer" style=" font-size: 9pt;">
										<h:outputText value="#{item.manufacturer.name}"
											style=" font-size: 9pt;" />
									</p:column>
									<p:column headerText="Model" style=" font-size: 9pt;">
										<h:outputText value="#{item.model}" style=" font-size: 9pt;" />
									</p:column>
									<p:column headerText="Category" style=" font-size: 9pt;">
										<h:outputText value="#{item.category.name}"
											style=" font-size: 9pt;" />
									</p:column>
									<p:column headerText="Parameters" style=" font-size: 9pt;">
										<h:outputText value="#{item.params}" style=" font-size: 9pt;" />
									</p:column>
									<f:facet name="footer">
										<p:commandLink value="Select"
											update=":form:paramText, :form:linear, :form:message"
											oncomplete="paramDialog.hide()" style=" font-size: 9pt;"
											actionListener="#{trendsBean.loadChart}" />
									</f:facet>
								</p:dataTable>
							</p:column>
						</p:row>
					</p:panelGrid>
				</p:dialog>
				<p:panelGrid id="trendsGrid">
					<p:row>
						<p:column>
							<div style="text-align: left;">Suppliers:</div>
							<p:selectOneListbox id="suppliers"
								value="#{trendsBean.selectedSupplier}"
								style="height:130px; width:140px; font-size: 9pt;">
								<f:selectItems value="#{trendsBean.selectedSuppliers}" var="sup"
									itemValue="#{sup}" itemLabel="#{sup}" style=" font-size: 9pt;" />
							</p:selectOneListbox>
							<p:commandLink id="change" value="Change" disabled="true" />
							<p:overlayPanel id="overlay" for="change" showEffect="blind"
								hideEffect="blind" showEvent="mouseover" hideEvent="mousedown"
								styleClass="ui-helper-clearfix">
								<p:dataTable var="supplier" value="#{trendsBean.suppliers}"
									selection="#{trendsBean.selectedSuppliers}"
									rowKey="#{supplier}">
									<p:column selectionMode="multiple"
										style="width:9px; font-size: 9pt;" />
									<p:column headerText="Name" style=" font-size: 9pt;">
										<h:outputText value="#{supplier}" style=" font-size: 9pt;" />
									</p:column>
									<f:facet name="footer">
										<p:commandLink value="Select"
											update=":form:suppliers, :form:linear, :form:message"
											style=" font-size: 9pt;"
											actionListener="#{trendsBean.loadChart}" />
									</f:facet>
								</p:dataTable>
							</p:overlayPanel>
							<div style="text-align: left; margin: 5px;">Start date:</div>
							<p:calendar value="#{trendsBean.startDate}" effect="slideDown" />
							<div style="text-align: left; margin: 5px;">End date:</div>
							<p:calendar value="#{trendsBean.endDate}" effect="slideDown" />
							<div style="text-align: left; margin: 5px;">
								<p:commandButton value="Refresh"
									actionListener="#{trendsBean.loadChart}"
									update=":form:linear, :form:message" />
							</div>
						</p:column>
						<p:column>
							<p:row>
								<p:commandButton icon="ui-icon-search"
									oncomplete="paramDialog.show()" style=" font-size: 9pt;" />
								<p:spacer width="40"></p:spacer>
								<h:outputText id="paramText" value="#{trendsBean.itemString}"
									style=" font-size: 12pt;" />
							</p:row>
							<p:row>
								<p:lineChart id="linear" value="#{trendsBean.itemModel}"
									legendPosition="e" title="Linear Chart"
									style="height:300px; width: 800px; margin: 20px;"
									xaxisLabel="Date" yaxisLabel="Price USD" xaxisAngle="45"/>
							</p:row>
						</p:column>
					</p:row>
				</p:panelGrid>
			</h:form>
		</div>

	</ui:define>
</ui:composition>